<template>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=pageInfo.currentPage
        :page-sizes="[5, 10, 15, 20]"
        :page-size=pageInfo.pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
    </el-pagination>
</template>
<script>
export default {
  data() {
    return {
      pageInfo: {
        pageSize: 5,
        currentPage: 1,
      },
      total: 0,
    };
  },
  methods: {
    /**
     * 修改每页显示条数
     * @param val
     */
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.$parent.initTableChild(this.pageInfo);
    },
    /**
     * 修改当前页码
     * @param val
     */
    handleCurrentChange(val) {
      this.pageInfo.currentPage = val;
      this.$parent.initTableChild(this.pageInfo);
    }
  },
}
</script>